import { getToken } from '@/utils/auth';
import { createRouter, createWebHistory, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

import Layout from '../layout/Layout.vue'

import { useUserStore } from '@/stores/user'

declare module 'vue-router' {
  interface RouteMeta {
    // 是可选的
    title?: string
    // 每个路由都必须声明
    requiresAuth?: boolean
  }
}


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/index',
      redirect: '/home',
    },
    {
      path: '/',
      redirect: '/home',
      component: Layout,
      children: [
        {
          path: 'home',
          name: 'home',
          component: () => import('../views/Home.vue'),
          meta: {
            title: '论坛'
          }
        },
        {
          path: 'blog/:id',
          name: 'bloginfo',
          component: () => import('../views/blog/BlogInfo.vue'),
        },
        {
          path: 'gobang',
          name: 'gobang',
          component: () => import('../views/gobang/GoBang.vue'),
          meta: { requiresAuth: true },
        },
        {
          path: 'im',
          name: 'im',
          component: () => import('../views/im/Layout.vue'),
          meta: { requiresAuth: true },
        },
        {
          path: 'post',
          name: 'post',
          component: () => import('../views/Post.vue'),
          meta: { requiresAuth: true },
        }
      ]
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/login',
      name: 'login',
      meta: {
        title: '登录'
      },
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/Login.vue')
    },
    {
      path: '/register',
      name: 'register',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/Register.vue')
    },
    {
      path: '/user',
      name: 'user',
      component: Layout,
      // redirect: 'no'
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      children: [
        {
          path: ':userName',
          name: 'userinfo',
          component: () => import('@/views/user/UserInfo.vue'),
          meta: {
            requiresAuth: true
          }
        },
        {
          path: 'personal',
          name: 'personal',
          component: () => import('@/views/user/personal/personal.vue'),
          meta: {
            requiresAuth: true
          }
        }
      ]
    },
  ],
  
})


/**
 * 路由守卫
 */
router.beforeEach((to, from) => {
  let userStore = useUserStore()

  if (to.meta.title) {
    document.title = to.meta.title
  }
  // 登录验证
  if (to.meta?.requiresAuth && !userStore.isLoggedIn) {
    console.log('redirect');
    
    return {
      path: '/login',
      // 保存我们所在的位置，以便以后再来
      query: { redirect: to.fullPath },
    }
  }
  if (!(to.name == 'login')) {
    // useUserStore().getInfo()
  }
  
})


export default router
